import React from "react";
import SyntaxHighlighter from 'react-syntax-highlighter';
import { lightfair } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import CopyToClipboard from 'react-copy-to-clipboard';
import { CopyOutlined } from '@ant-design/icons'
import { message } from "antd";
import './index.less'

interface Props {
  code: string;
  step?: string
}
const SyntaxCopy: React.FC<Props> = (props) => {
  return (
    <article>
      <section style={{position: 'relative'}}>
        { props.step && <strong>{props.step}</strong> }
        <SyntaxHighlighter language="bash" style={lightfair}>
          {props.code}
        </SyntaxHighlighter>
        <CopyToClipboard
          text={props.code}
          onCopy={() => {
            message.info('复制成功');
          }}
        >
          <CopyOutlined style={{ cursor: 'pointer', position: 'absolute', right: 0, bottom: '10px' }} />
        </CopyToClipboard>
      </section>
    </article>
  )
}

export default SyntaxCopy;
